<!-- 人员维度统计-详情 -->
<template>
  <div class="page">
    <!-- <div class="head">
      <van-icon @click="goback" class="back-icon" name="arrow-left" />
      <Title></Title>
    </div> -->
    <div class="main">
      <div class="base-info">
        <div class="list">
          <div class="item-info">
            <div class="info-name">
              <img class="user-img" v-if="dataInfo.GND_CODE == 0" src="@/assets/img/man.png" alt="">
              <img class="user-img" v-else src="@/assets/img/woman.png" alt="">
              <span class="title">{{ dataInfo.EMPE_NM || '-' }}</span>
              <span class="code">{{ dataInfo.EMPE_NO || '-' }}</span>
            </div>
          </div>
          <div class="depart-name">
            <span class="left">{{ dataInfo.FGS || '-' }}-{{ dataInfo.YYB || '-' }}</span>
          </div>
          <div class="user-date">
            <div class="date-item">
              <span class="num">{{ dataInfo.MAX_OVERDUE_DAYS || 0 }}</span>
              <span>最长超期天数</span>
            </div>
            <div class="date-item">
              <span class="num">{{ dataInfo.LAST_OVERDUE_DAYS || 0 }}</span>
              <span>上一次超期天数</span>
            </div>
            <div class="date-item">
              <span class="num">{{ dataInfo.LAST_OVERDUE_TM || '-' }}</span>
              <span>最近一次超期日期</span>
            </div>
          </div>
        </div>
      </div>
      <!-- <van-loading size="24px" style="position: relative;top: 3%;" v-if="listLoading" vertical>
        加载中...v-else
      </van-loading> -->
      <div class="status-list">
        <div :class="isVisableFixed ? 'head h-fixed' : 'head'" ref="headF">
          <div class="btns">
            <van-button :class="activeBtn == item.key ? 'button-item activebtn' : 'button-item'" v-model="activeBtn"
              round type="info" v-for="item in stausBtns" :key="item.key" @click="handleChangeType(item)">
              {{ item.value }} <span v-if="item.num">({{ item.num }})</span>
            </van-button>
          </div>
        </div>

        <div v-if="dataList && dataList.length > 0">
          <div class="list" v-for="(item, index) in dataList" :key="item.id">
            <div class="item-info">
              <div class="info-name">
                <span class="title">{{ item.PROBLEM || '-' }}<span>({{ item.YEAR }}年度)</span></span>
              </div>
              <div class="info-status">
                <span v-if="item.STATUS_CODE == 0" class="stu1">未学</span>
                <span v-else-if="item.STATUS_CODE == 2" class="stu2">超期完成</span>
                <span v-else-if="item.STATUS_CODE == 1" class="stu3">期限内完成</span>
              </div>
            </div>
            <div class="depart-name">
              <span class="left">任务起止日期：{{ item.START_TM || '-' }}至{{ item.END_TM || '-' }}</span>
            </div>
            <van-divider />
            <div :class="isShowAll && activeIndex == index ? 'case-text showall' : 'case-text'">
              <span>案例内容：</span><span class="text">{{ item.DESCRIPTION || '-' }}</span>
            </div>
            <div class="more" v-if="item.DESCRIPTION && item.DESCRIPTION.length > 72" @click="handleMoreText(index)">
              <van-icon :name="isShowAll && activeIndex == index ? 'arrow-up' : 'arrow-down'" />
            </div>
          </div>
        </div>
        <van-empty v-else description="暂无数据" />
      </div>
    </div>
  </div>
</template>

<script>

import Title from '@/components/commonTitle.vue'
import { Dialog } from 'vant';
import { getCaseData } from '@/api/case'
export default {
  name: 'employeeStaDetail',
  components: { Title, },
  data() {
    return {
      activeIndex: 0,
      listLoading: true,
      activeBtn: '4',
      stausBtns: [
        //  0 未完成 1期限内已完成 2逾期完成 -1任务已撤回
        { key: '4', value: '全部学习案例', status: '' },
        { key: '5', value: '未完成数量', status: '0' },
        { key: '6', value: '已学数量', status: '1$2' },
        // { id: 4, key: '4', value: '期限内完成', num: 4 }
      ],
      dataList: [],
      isVisableFixed: false,
      isShowAllBtn: false,
      isShowAll: false,
      currentH: 0,
      searchQry: {
        code: '80307',
        pagenum: 0,
        pagesize: 10,
        // sortdatafield,
        // sortorder,
      },
      qrydata: {
        NUM_TYPE: 3, // 固定值1	1按案例统计2按员工统计3案例学习明细4撤销任务
        NUM_QRY_TYPE: '',	//案例学习明细的不同查询类型	4: 员工全部 5：员工未完成 6: 员工逾期的任务
        NUM_EMPE_ID: this.$route.query.empeid || '',//	派发任务ID	
      },
      dataInfo: {},
      allDataLgh: 0,
      finishedDataLgh: 0,
      finishedData: []
    }
  },
  watch:{
   '$route.query.empeid'(val){
    if(val) {
      this.dataList = []
      this.dataInfo = JSON.parse(this.$route.query.rowObj)
      this.qrydata.NUM_EMPE_ID = val
      this.getDataList()
    }
   } 
  },
  created() {
    this.dataList = []
    this.dataInfo = JSON.parse(this.$route.query.rowObj)
    // console.log(this.dataInfo);
    this.getDataList()
    window.addEventListener('scroll', this.windowScrollListener, true);
  },
  mounted() { },
  methods: {
    async getDataList() {
      let qry = {
        ...this.searchQry,
        params: JSON.stringify(this.qrydata)
      }
      const resData = await getCaseData(qry)
      this.listLoading = false
      this.dataList = [...this.dataList, ...resData.data.VALUE_LIST]
      if (resData.data.VALUE_LIST.length < this.searchQry.pagesize) {
        this.finished = true
      }

      if (this.activeBtn == '4') {
        this.allDataLgh = this.dataList.length || 0

        this.finishedData = this.dataList.filter(item =>
          item.STATUS_CODE != 0 && item.STATUS_CODE != -1
        )
        this.finishedDataLgh = this.finishedData.length || 0
      }

      this.getStatusList()
    },
    // 累计数值
    getStatusList() {
      try {
        const list = this.dataList
        const countObj = {};
        list.forEach((item) => {
          let key
          if (item.STATUS_CODE == 1 || item.STATUS_CODE == 2) {
            key = '1$2'
          } else {
            key = item.STATUS_CODE; //使用code
          }

          if (countObj[key]) {
            countObj[key]++;
          } else {
            countObj[key] = 1;
          }
        });

        const countArr = Object.entries(countObj).sort((a, b) => b[1] - a[1]);
        // 输出列表
        let newarr = []
        countArr.forEach(([key, value]) => {
          newarr.push({
            status: key,
            num: value
          });
        });
        this.stausBtns = this.stausBtns.map(ele => {
          newarr.forEach(temp => {
            if (ele.status == temp.status) { ele.num = temp.num }
          })
          return { ...ele }
        })
        this.stausBtns[0].num = this.allDataLgh || 0 // 全部
        this.stausBtns[2].num = this.finishedDataLgh || 0 // 已完成
      } catch (error) {
        // console.log(error, '-----error');
      }
    },
    //监听窗口滚动
    windowScrollListener: function () {
      //获取操作元素最顶端到页面顶端的垂直距离
      let scrollele = document.getElementsByClassName('main')[0]
      let headele = this.$refs.headF.getBoundingClientRect()
      // console.log(headele.top, scrollele.scrollTop, '----scrollTop');

      this.isVisableFixed = false
      if (scrollele && headele.top < scrollele.scrollTop) {
        this.isVisableFixed = true
      }
    },
    handleChangeType(data) {
      this.activeBtn = data.key
      this.qrydata.NUM_QRY_TYPE = data.key
      this.dataList = []
      if (data.key == '6') {
        this.dataList = this.finishedData || []
      } else {
        this.getDataList()
      }
    },
    handleMoreText(index) {
      this.activeIndex = index
      this.isShowAll = !this.isShowAll
      // this.$nextTick(() => {
      //   console.log(this.$refs.concol.offsetHeight);
      //   this.currentH = this.$refs.concol.offsetHeight - 40
      // })
    },
    goback() {
      if (this.$route.query.type == 2 && this.timerVal > 0) {
        console.log('567890');
        Dialog.confirm({
          // title: '标题',
          message: '还未学习完，是否返回',
          confirmButtonText: '否',
          cancelButtonText: '是',
          confirmButtonColor: '#397FF9'
        })
          .then(() => {
            // todo 要不要更新状态发请求？？

          })
          .catch(() => {
            this.$router.push({
              path: '/',
              query: {
                active: this.$route.query.activeType,
                orgid: this.$route.query.orgid
              }
            })
          });

      } else {
        this.$router.push({
          path: '/',
          query: {
            active: this.$route.query.activeType,
            orgid: this.$route.query.orgid
          }
        })
      }
    }

  },
  destroyed() {
    //离开页面时删除该监听
    window.removeEventListener('scroll', this.windowScrollListener, true)
  }

}
</script>

<style lang="less" scoped>
.page {
  height: 100%;
  background: #fff;
  overflow: hidden;

  .head {
    position: relative;
    // height: 100px;
    // line-height: 100px;

    .back-icon {
      position: absolute;
      left: 30px;
      z-index: 999;
      font-size: 28px;
      line-height: 100px;
      color: #fff;
      cursor: pointer;
      width: 50px;
    }
  }

  .main {
    height: calc(100% - 56px);
    overflow: auto;
    padding: 30px;

    .base-info {

      .list {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;

        &:last-child {
          margin-bottom: 0;
        }

        .item-info {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .info-name {
            font-size: 26px;
            line-height: 40px;
            color: #333;
            font-weight: 400;
            font-family: SourceHanSansCN, SourceHanSansCN;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .user-img {
              width: 50px;
            }

            .title {
              padding: 0 10px;
            }

            .code {
              color: #7F8389;
            }
          }

          .info-status {
            font-size: 24px;
            line-height: 36px;
            font-family: SourceHanSansCN, SourceHanSansCN;

            .stu1 {
              color: #397FF9;
            }

            .stu2 {
              color: #C52026;
            }

            .stu3 {
              color: #EAA60F;
            }

            .stu4 {
              color: #666;
            }


          }
        }

        .depart-name {
          display: flex;
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 400;
          font-size: 24px;
          color: #7F8389;
          line-height: 36px;

          .left {
            display: inline-block;
            margin-right: 36px;
          }
        }

        .user-date {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 400;
          font-size: 26px;

          .date-item {
            display: flex;
            flex-direction: column;
            text-align: center;
            color: #5A4F4F;

            .num {
              padding: 20px 0;
              color: #7F8389;
            }
          }
        }
      }

    }

    /deep/.status-list {
      position: relative;

      .head {
        // height: 68px;
        transition: all 0.4s;
        background: #fff;

        .btns {
          padding: 40px 0 30px;
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 500;
          // font-size: 26px;

          display: flex;
          justify-content: space-between;

          .button-item {
            font-size: 26px;
            min-width: 122px;
            height: 52px;
            border-radius: 26px;
            padding: 20px;

            color: #5A4F4F;
            background: #F6F6F6;
            border-color: transparent;
          }

          .activebtn {
            background: #397FF9;
            color: #FFFFFF;
            border-color: #397FF9;
          }
        }

      }

      .h-fixed {
        width: calc(100% - 60px);
        position: fixed;
        // top: 92px;
        top: 0;
        z-index: 999;
      }

      .list {
        position: relative;
        height: auto;
        padding: 40px 30px;
        margin-bottom: 20px;
        background: #fff;
        // display: flex;
        // justify-content: space-evenly;
        // flex-direction: column;
        border: 1px solid #DEDEDE;

        &:last-child {
          margin-bottom: 0;
        }

        .item-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 30px;

          .info-name {
            line-height: 40px;
            font-weight: 500;
            font-size: 28px;
            color: #333333;
            font-family: SourceHanSansCN, SourceHanSansCN;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }

          .info-status {
            font-size: 24px;
            line-height: 36px;
            font-family: SourceHanSansCN, SourceHanSansCN;

            .stu1 {
              color: #397FF9;
            }

            .stu2 {
              color: #C52026;
            }

            .stu3 {
              color: #EAA60F;
            }

            .stu4 {
              color: #666;
            }


          }
        }

        .depart-name {
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 400;
          line-height: 36px;
          font-size: 26px;
          color: #7F8389;
        }

        .case-text {
          font-size: 26px;
          color: #5A4F4F;

          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;

          .text {
            color: #7F8389;
          }
        }

        .showall {
          display: block;
        }

        .more {
          position: absolute;
          bottom: 8px;
          right: 50%;
          cursor: pointer;
          font-size: 24px;
          // width: 50px;

          .van-icon {
            width: 24px;
            color: #7F8389;
          }
        }
      }
    }
  }
}
</style>